<template>
    <div>
        <div class="container">
            <div class="TitlePic">
                <img :src="this.src" alt="">
            </div>
            <div>
                <h1>HTML写法</h1>
                <div class="prism-wrapper">
                        <Prism :language="html" class="prism-content">
                                                {{ `
                                            <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8" />
                            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                            <title>Expanding Cards</title>
                            <style type="text/css">
                                * {
                                    box-sizing: border-box;
                                }

                                body {
                                    font-family: 'Muli', sans-serif;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    height: 100vh;
                                    overflow: hidden;
                                    margin: 0;
                                }

                                .container {
                                    display: flex;
                                    width: 90vw;
                                }

                                .panel {
                                    background-size: cover;
                                    background-position: center;
                                    background-repeat: no-repeat;
                                    height: 80vh;
                                    border-radius: 50px;
                                    color: #fff;
                                    cursor: pointer;
                                    flex: 0.5;
                                    margin: 10px;
                                    position: relative;
                                    -webkit-transition: all 700ms ease-in;
                                }

                                .panel h3 {
                                    font-size: 24px;
                                    position: absolute;
                                    bottom: 20px;
                                    left: 20px;
                                    margin: 0;
                                    opacity: 0;
                                }

                                .panel.active {
                                    flex: 5;
                                }

                                .panel.active h3 {
                                    opacity: 1;
                                    transition: opacity 0.3s ease-in 0.4s;
                                }

                                @media (max-width: 480px) {
                                    .container {
                                        width: 100vw;
                                    }

                                    .panel:nth-of-type(4),
                                    .panel:nth-of-type(5) {
                                        display: none;
                                    }
                                }
                            </style>
                        </head>

                        <body>
                            <div class="container">
                                <div class="panel active"
                                    style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
                                    <h3>Explore The World</h3>
                                </div>
                                <div class="panel"
                                    style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
                                    <h3>Wild Forest</h3>
                                </div>
                                <div class="panel"
                                    style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
                                    <h3>Sunny Beach</h3>
                                </div>
                                <div class="panel"
                                    style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
                                    <h3>City on Winter</h3>
                                </div>
                                <div class="panel"
                                    style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
                                    <h3>Mountains - Clouds</h3>
                                </div>

                            </div>

                            <script>
                                const panels = document.querySelectorAll('.panel')
                                panels.forEach(panel => {
                                    panel.addEventListener('click', () => {
                                        removeActiveClasses()
                                        panel.classList.add('active')
                                    })
                                })
                                function removeActiveClasses() {
                                    panels.forEach(panel => {
                                        panel.classList.remove('active')
                                    })
                                }
                            </script>
                        </body>

                                                    </html>
                                                                `}}
                    </Prism>
                </div>
                <h1>VUE写法</h1>
                <blockquote cite="http://www.worldwildlife.org/who/index.html">
                    For 50 years, WWF has been protecting the future of nature. The worlds leading conservation
                    organization,
                    WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5
                    million
                    globally.
                </blockquote>
            </div>
        </div>
    </div>
</template>

<script>
import 'prismjs';
import 'prism-themes/themes/prism-atom-dark.css'; // 根据需要选择样式
import 'prismjs/components/prism-python';
import Prism from 'vue-prism-component'
export default {
    data() {
        return {
            src:'',
        };
    },
     components: {
        Prism,
    },
    created() {
        this.src= this.$route.query.src;
    },
    mounted() {
    },
    methods: {
    },
};
</script>

<style scoped>
.TitlePic {
    width: 800px;
    height: 500px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.TitlePic img {
    width: 100%;
    height: 100%;
}
</style>
